<template>
  <el-container>
    <el-header>
      <h3>教练信息</h3>
    </el-header>
    <el-main>
      <el-form ref="form" :model="form" :rules="rule" label-width="350px" label-position="right">
        <el-form-item label="图像:">
            <el-avatar :src="form.avatar" :size="60"></el-avatar>
        </el-form-item>
        <el-form-item label="姓名:" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码:" prop="mobile">
          <el-input type="text" v-model.number="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="年龄:" prop="age">
          <el-input type="number" v-model.number="form.age"></el-input>
        </el-form-item>
        <el-form-item label="教龄:" prop="teach_age">
          <el-input type="number" v-model.number="form.teach_age"></el-input>
        </el-form-item>
        <el-form-item label="属下学员:">
          <el-input type="text" v-model="form.student_total" disabled></el-input>
        </el-form-item>
        <el-form-item label="推广学员:">
          <el-input type="text" v-model="form.enrollment_total" disabled></el-input>
        </el-form-item>
        <el-form-item label="满意率:">
          <el-input type="text" v-model="form.good_rating" disabled></el-input>
        </el-form-item>
        <el-form-item label="及格率:">
          <el-input type="text" v-model="form.pass_rating" disabled></el-input>
        </el-form-item>
        <el-form-item label="添加时间:">
          <el-input type="text" v-model="form.create_time" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click.prevent="edit" :loading="loading">保存</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import {getCoachInfo, checkMobile, updateCoachInfo} from '@/api/coach'
    export default {
        name: "info",
        inject: ['reload'],
        data () {
            const checkTelephone = (rule, value, callback) => {
                var pattern = /^1\d{10}$/;
                if (!pattern.test(value)){
                    callback(new Error('手机号码不正确'));
                } else {
                    callback();
                }
            };
            const checkUser = (rule, value, callback) => {
                if (value == this.old_mobile) {
                    return callback();
                }
                checkMobile({mobile: value}).then(response => {
                    callback();
                }).catch( err => {
                    callback(new Error(err));
                })
            };
            return {
                form: {
                    avatar: '',
                    name: '',
                    mobile: '',
                    age: 0,
                    teach_age: 0,
                    student_total: 0,
                    enrollment_total: 0,
                    good_rating: 0,
                    pass_rating: 0,
                    create_time: ''
                },
                rule: {
                    name: [
                        {required: true, message: '教练名称为必填项', trigger: 'blur'},
                        {min: 2, message: '姓名字符长度最少两位', trigger: ['blur','change']}
                    ],
                    mobile: [
                        {required: true, message: '手机号是必填项', trigger: 'blur'},
                        {validator: checkTelephone, message: '手机号由11位长度数字组成', trigger: ['blur','change']},
                        {validator: checkUser, message: '手机号码已经被使用', trigger: ['blur','change']}
                    ],
                    age: [
                        {required: true, message: '年龄是必填项', trigger: 'blur'},
                        {type: 'number', message: '年龄类型错误', trigger: ['blur','change']}
                    ],
                    teach_age: [
                        {required: true, message: '教龄是必填项', trigger: 'blur'},
                        {type: 'number', message: '教龄类型错误', trigger: ['blur','change']}
                    ]
                },
                coach_id: 0,
                old_mobile: '',
                loading: false,
            };
        },
        methods: {
            edit() {
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.loading = true;
                    var data = {
                        coach_id: this.coach_id,
                        name: this.form.name,
                        mobile: this.form.mobile,
                        age: this.form.age,
                        teach_age: this.form.teach_age
                    };
                    updateCoachInfo(data).then(response => {
                      this.$message.success(response.msg);
                      this.loading = false;
                      this.reload();
                    }).catch( err => {
                        this.loading = false;
                    })
                });
            }
        },
        mounted() {
          this.coach_id = this.$route.query.coach_id;
          getCoachInfo({coach_id: this.coach_id}).then(response => {
              this.form = response.data;
              this.old_mobile = this.form.mobile;
          }).catch( err => {
          })
        }
    }
</script>

<style scoped>
  .el-container {
    width: 70%;
    max-width: 70%;
    overflow: hidden;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin: 10px auto;
  }

  .el-header {
    text-align: center;
  }

  .el-header h3 {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
  }

  .el-main .el-form .el-input{
    width: 40%;
  }
</style>
